<template>
  <div>
    <!-- 搜索框 -->
    <TopFilter :list="topFilterList" :cols="3" :collapse="false" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>

    <!-- 车辆信息 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :height="'500'"
      :isColumnFilter="false"
      :selectionType="'single'"
      columnsRef="khtsXzgdClxxTable"
      :onRowSelectChange="arr => (this.choose = arr)"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>

    <div style="text-align:center">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="req">确 定</el-button>
        <el-button type="primary" @click="cancle">取 消</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { searchVehicle } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import dictCode from '@/utils/dictCode';

export default {
  name: 'ChooseVehicle',
  components: {},
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: searchVehicle, // 获取车辆表格接口
      fetchParams: { xhrAbort: true }, // 获取车辆表格参数
      columns: this.createTableColumns(), // 车辆信息表格列
      choose: [] // 选中的车辆信息
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'ownerName',
          placeholder: '车主姓名'
        },
        {
          type: 'INPUT',
          label: '车主手机',
          fieldName: 'mobile',
          placeholder: '车主手机'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: '车牌号'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: 'VIN'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '车主姓名',
          dataIndex: 'OWNER_NAME',
          sorter: true
        },
        {
          title: '车主性质',
          dataIndex: 'OWNER_PROPERTY',
          sorter: true,
          render: props => {
            return <div>{this.createDictText(props.row.OWNER_PROPERTY, '8011')}</div>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 150,
          sorter: true
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          showOverflowTooltip: true,
          sorter: true
        },

        {
          title: '行驶里程',
          dataIndex: 'MILEAGE',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '购车日期',
          dataIndex: 'SALES_DATE',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '车主地址',
          dataIndex: 'ADDRESS',
          showOverflowTooltip: true,
          sorter: true
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 取消
    cancle() {
      this.$emit('cancle');
    },
    // 确定选择车辆
    req() {
      if (this.choose.length === 0) {
        this.$message.error('请选择一个车辆');
        return;
      }
      this.$emit('req', this.choose[0]);
    }
  }
};
</script>
